<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>2.0 Node对象的方法</title>
  </head>

  <body>
    <div style="margin-left: 50px">
      <button id="btnAfter">after</button>
      <button id="btnBefore">before</button>
      <button id="btnAppend">append</button>
      <button id="btnPrepend">prepend</button>
    </div>
    <div style="margin: 50px">
      <div id="buttons">
        <button id="btnBase">基准按钮</button>
      </div>
    </div>

    <script>
      btnAfter.addEventListener("click", function (e) {
        const btn = document.createElement("button");
        btn.textContent = "after button";
        // Element.after(...nodesOrDOMStrings);
        btnBase.after(btn, "after text");
      });

      btnBefore.addEventListener("click", function (e) {
        const btn = document.createElement("button");
        btn.textContent = "before button";
        // Element.before(...nodesOrDOMStrings);
        btnBase.before(btn, "before text");
      });

      btnAppend.addEventListener("click", function () {
        const btn = document.createElement("button");
        btn.textContent = "append button";
        // Element.append(...nodesOrDOMStrings)
        buttons.append(btn, "append text");
      });

      btnPrepend.addEventListener("click", function () {
        const btn = document.createElement("button");
        btn.textContent = "prepend button";
        // Element.prepend(...nodesOrDOMStrings)
        buttons.prepend(btn, "prepend text");
      });
    </script>
  </body>
</html>
